<template>
    <div class="box">
        <el-dialog v-model="showDialog"  :show-close="true" width="500px" :close-on-click-modal="false"
            :close-on-press-escape="false" @close="showDialog = false">
            <template #title>
                <div class="title">
                    <img class="icon" src="../../assets/home/alipay.png" alt="">
                    支付宝账户充值
                </div>
            </template>
            <div class="content">
                <div class=" mg-b-25 fs-14 fc-9497B1">当前账户可用金额￥{{ num }}</div>
                <div class="flex flex-ai-c gap-20">
                    <div class=" fs-22 bold">¥</div>
                    <input class="flex-1 border-none" @input="onKeyUp" type="text" v-model="value"
                        placeholder="请输入充值金额">
                </div>
            </div>
            <template #footer>
                <el-button type="primary" @click="onSubmit">立即充值</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { alipayRecharge } from '@/api/alipay-recharge'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    num: {
        type: [String, Number],
        default: ''
    }
})
const emit = defineEmits(['update:show'])
const value = ref('')
const showDialog = ref(false)
const onKeyUp = () => {
    // 使用正则表达式来验证输入值
    const regex = /^(\d+(\.\d{1,2})?|\.\d{1,2})$/
    if (!regex.test(value.value)) {
        // 如果输入不符合规则，则去除不符合规则的部分
        value.value = value.value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
        const parts = value.value.split('.')
        if (parts[1] && parts[1].length > 2) {
            value.value = parts[0] + '.' + parts[1].slice(0, 2)
        }
        if (value.value.startsWith('.')) {
            value.value = '0' + value.value
        }
        if (parseFloat(value.value) < 0) {
            value.value = '0' // 如果输入为负数，则重置为0
        }
    }
}
const onSubmit = async () => {
    if (value.value !== '') {
        showDialog.value = false
        let num = value.value.endsWith('.') ? value.value + '00' : value.value
        let res = await alipayRecharge({ totalAmount: num })
        if (res) {
            window.open(res.body)
        }
    } else {
        ElMessage.error('请输入充值金额')
    }
}
watch(() => props.show, (newVal) => {
    value.value = ''
    showDialog.value = newVal
}, { immediate: true })

watch(showDialog, (newVal) => {
    emit('update:show', newVal)
})

</script>
<style lang="stylus" scoped>
.border-none
    border none
    outline medium
    font-size 26px
.fc-9497B1
    color #9497B1
:deep() .el-dialog
    background-color #F7F8FC !important
    border-radius 8px

.content
    width 100%
    box-sizing border-box
    background-color #FFFFFF
    border-radius 8px
    padding 28px 16px

.title
    display flex
    align-items center
    gap 10px
    font-size 16px
    font-weight 600
    color #202536
    .icon
        width 20px
        height 20px

</style>
